(function() {

holybible.view.HeaderView = holybible.view.View.extend({
	TEMPLATE: '<div class="header default"><h1><a href="/" id="btnRoot" title="Holy Bible">Holy Bible</a></h1></div>',
	init: function() {
		this._super();
		this.titleContainer = undefined;
		this.bibleTitleView = new TitleView();
		this.bookTitleView = new TitleView();
		this.chapterTitleView = new TitleView();
	},
	draw: function() {
		this._super();
		this.container = $(this.makeHtml(this.TEMPLATE));
		$(document.body).append(this.container);
		this.titleContainer = $("<div id='title' class='title'></div>");
		this.container.append(this.titleContainer);
		this.setEvent();
		
		this.bibleTitleView.init();
		this.bookTitleView.init();
		this.chapterTitleView.init();
	},
	setEvent: function() {
		$("#btnRoot").click(function(e) {
			showBibleList();
			e.preventDefault();
			e.stopPropagation();
		});
	},
	showDefaultTitle: function() {
		this.container.addClass("default");
	},
	hideDefaultTitle: function() {
		this.container.removeClass("default");
	},
	setTitle: function(vcode, bcode, cnum) {
		if (vcode) {
			this.hideDefaultTitle();
			var bible = holybible.model.Bible.getInstance().getBible(vcode);
			this.bibleTitleView.setTitle(bible.name, function() {
				showBookList({
					vcode: vcode
				});
			});
			this.bibleTitleView.show();
		} else {
			this.showDefaultTitle();
			this.bibleTitleView.hide();
		}
		
		if (bcode) {
			var book = holybible.model.Book.getInstance().getBook(vcode, bcode);
			this.bookTitleView.setTitle(book.name, function() {
				showChapterList({
					vcode:vcode,
					bcode:bcode
				});
			});
			this.bookTitleView.show();
		} else {
			this.bookTitleView.hide();
		}
		
		if (cnum) {
			this.chapterTitleView.setTitle(cnum, function() {
				showVerses({
					vcode: vcode,
					bcode: bcode,
					cnum: cnum
				});
			});
			this.chapterTitleView.show();
		} else {
			this.chapterTitleView.hide();
		}
	}
});

var TitleView = holybible.view.View.extend({
	TEMPLATE: '<a href="javascript:;"></a>',
	init: function() {
		this._super();
		this.draw();
		this.title = "";
		this.action = function() {};
	},
	draw: function() {
		this._super();
		this.container = $(this.makeHtml(this.TEMPLATE));
		$("#title").append(this.container);
		this.setEvent();
	},
	setEvent: function() {
		var self = this;
		this.container.click(function(e) {
			self.action();
		});
	},
	setTitle: function(title, action) {
		this.title = title;
		this.container.text(title);
		this.action = action;
	}
});

})();
